<template>
  <content-field>
    <n-card>
      <n-tabs
        class="card-tabs"
        default-value="signin"
        size="large"
        animated
        style="margin: 0 -4px"
        pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
      >
        <n-tab-pane name="signin" tab="登录">
          <n-form>
            <n-form-item-row label="用户名">
              <n-input v-model:value="user.username" />
            </n-form-item-row>
            <n-form-item-row label="密码">
              <n-input
                type="password"
                v-model:value="user.password"
                show-password-on="click"
              >
                <template #password-visible-icon>
                  <n-icon :size="16" :component="GlassesOutline" />
                </template>
                <template #password-invisible-icon>
                  <n-icon :size="16" :component="Glasses" /> </template
              ></n-input>
            </n-form-item-row>
            <n-button
              type="primary"
              block
              secondary
              strong
              @click="loginBtn"
              @keydown.enter="loginBtn"
            >
              登录
            </n-button>
          </n-form>
        </n-tab-pane>
        <n-tab-pane name="signup" tab="注册">
          <n-result status="500" title="尽情期待" description="私密马赛">
            <template #footer>
              <n-button>给作者一拳</n-button>
            </template>
          </n-result>
          <n-form v-if="false">
            <n-form-item-row label="用户名">
              <n-input />
            </n-form-item-row>
            <n-form-item-row label="密码">
              <n-input />
            </n-form-item-row>
            <n-form-item-row label="重复密码">
              <n-input />
            </n-form-item-row>
            <n-button type="primary" block secondary strong> 注册 </n-button>
          </n-form>
        </n-tab-pane>
      </n-tabs>
    </n-card>
  </content-field>
</template>

<script>
import {
  NForm,
  NFormItemRow,
  NIcon,
  NResult,
  NTabPane,
  NTabs,
  useMessage,
} from "naive-ui";
import ContentField from "@/components/ContentField.vue";
import { ref } from "@vue/reactivity";
import { useStore } from "vuex";
import routerJump from "@/composables/RouterJump";
import { GlassesOutline, Glasses } from "@vicons/ionicons5";
export default {
  components: {
    NTabs,
    NTabPane,
    NForm,
    NFormItemRow,
    ContentField,
    NResult,
    NIcon,
  },

  setup() {
    let user = ref({
      username: "",
      password: "",
    });

    const store = useStore();
    const { go_home } = routerJump();
    const message = useMessage();
    const loginBtn = () => {
      store
        .dispatch("login", user.value)
        .then(() => {
          go_home();
        })
        .catch((error) => {
          console.log(error);
          message.error(`登录失败${JSON.stringify(error.response.data)}`);
        });
    };

    return { user, loginBtn, GlassesOutline, Glasses };
  },
};
</script>

<style>
</style>